<template>
    <view class="login">
        <login-head title="登录" @back="back"></login-head>
        <view class="login-header" :style="{
			backgroundImage: `url(${$Common.urlTobase64('login', 'login_bg')})`,
	 }"></view>
        <view class="login-content">
            <view class="form-layout">
                <view class="form-li">
                    <i class="iconfont icon-shurushoujihao-baise form-i"></i>
                    <input 
                        v-model="form.phone"
                        class="login_input" 
                        type="number"
                        placeholder-class="phd_color"
                        placeholder="请输入手机号码"
                        :maxlength="11"
                    />
                </view>
                <view class="form-li">
                    <i class="iconfont icon-Xtubiao-qingzaicishurumima form-i"></i>
                    <input 
                        v-model="form.password"
                        type="password"
                        placeholder-class="phd_color"
                        class="login_input" 
                        placeholder="请输入密码"
                    />
                </view>
                <button class="btn_def" hover-class="btn_click" @click.native.prevent="submit">立即登录</button>
                <view class="set_pwd pointer" @click="goto('on')" v-if="is_Register" >忘记密码？</view>
            </view>
        </view>
        <view class="login-footer"></view>
        <view class="login-toolibs">
            <text>还没有账号？</text>
            <text class="toolibs-bg pointer" @click="goto('off')">立即注册</text>
        </view>
    </view>
</template>

<script>
import LoginHead from './components/header';
import { vPhone, vLength } from '@/utils/validate';
import { passengerLogin, driverLogin, passengerInfo } from '@/service/user';
export default {
    name: 'Login',
    components: {
        LoginHead
    },
    data() {
        return {
            form: {
                password: '',
                phone: ''
            }
        }
    },
    computed: {
        is_Register() {
            const bool = (this.$store.state.userRole === 'passenger');
            return bool;
        }
    },
    methods: {
        clear() {
            const { form } = this;
            for( let key in form ) {
                form[key] = '';
            }
        },
        back() {
            this.$Router.back();
        },
        goto(set) {
            let url = `/pages/login/register?setPassword=${set}`;
            this.clear();
            this.$Router.push(url);
        },
        async submit() {
            let res;
            const { form } = this;
            const role = this.$store.state.userRole;
            if( !vPhone.test(form['phone']) ) {
                this.show_Toast('none', '请输入正确手机号');
                return;
            }
            if( !vLength.test(form['password']) ) {
                this.show_Toast('none', '请输入六位以上密码');
                return;
            }
            if( role === 'driver' ) {
                res = await driverLogin(this.form);
                !res.success && this.show_Toast('none', '失败');
                res.success && this.$Cookies.set('admin_token', JSON.stringify(this.form));
                res.success && this.$Router.reLaunch('/pages/driver/index');
            } else if( role === 'passenger' ) {
                res = await passengerLogin(this.form);
                !res.success && this.show_Toast('none', '失败');
                const userInfo = await passengerInfo(this.form);
                userInfo.success && this.$Cookies.set('admin_token', JSON.stringify(userInfo.data.passenger));
                res.success && this.$Router.reLaunch('/pages/appointment/index');
            }
        }
    },
}
</script>

<style lang="scss" scoped>
$btn_bg: #016BDB;
$icon_bg: #017FE2;
$font12: 24rpx;
$font13: 26rpx;
$font14: 28rpx;
$white: #fff;
$clr8: #888888;
$border_bg: #E1E1E1;
$btm_bg: #E7F0FE;
.login {
    position: relative;
    .login-header {
        height: 45vh;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        background-position: center center;
        // background-image: url('~@/static/images/login_bg.png');
    }
    .login-content {
        position: absolute;
        left: 34rpx;
        right: 36rpx;
        top: 37.3%;
        z-index: 100;
        .form-layout {
            border-radius: 10rpx;
            padding-left: 46rpx;
            padding-right: 41rpx;
            background-color: $white;
            box-shadow: 0px 3px 6px 1px rgba(0, 0, 0, 0.13);
            overflow: hidden;
            .form-li {
                margin-top: 50rpx;
                padding-top: 18rpx;
                padding-bottom: 18rpx;
                display: flex;
                align-items: center;
                box-sizing: border-box;
                border-bottom: 1px solid $border_bg;
                .form-i {
                    font-size: $font14;
                    color: $icon_bg;
                }
                .login_input {
                    height: 38rpx;
                    padding-left: 18rpx;
                    font-size: $font12;
                    color: #000;
                    flex: 1;
                }
                /deep/.phd_color {
                    color: $clr8;
                }
            }
            .btn_def {
                height: 70rpx;
                border-radius: 34rpx;
                font-size: $font13;
                color: $white;
                background-color: $btn_bg;
                margin-top: 72rpx;
                margin-bottom: 40rpx;
            }
            .set_pwd {
                color: #666;
                font-size: 22rpx;
                text-align: right;
                margin-bottom: 50rpx;
            }
        }
    }
    .login-footer {
        height: 55vh;
        opacity: 0.3;
        background-color: $btm_bg;
    }
    .login-toolibs {
        position: absolute;
        bottom: 40rpx;
        left: 0;
        right: 0;
        font-size: $font12;
        text-align: center;
    }
    .toolibs-bg {
        color: $icon_bg;
        padding-left: 4px;
        padding-top: 5px;
        padding-bottom: 5px;
    }
}
</style>